<template>
	<view class="content">
		<image src="../../static/Group 111.png" mode=""  :class=" falish? `none` :``" class="over"></image>
		<view :class=" falish?'none':''" class="cover">
		</view>
		<image src="../../static/Group 117.png" mode="" class="top"></image>
		<view class="box">
			<view :class=" num?'card':'flippde'" @click="[reversal(),marry(1,`num`)]" >
				<view class="front" style="background-image: url('../../static/1.png');"></view>
				<view :class="num?'back':'backk'"></view>
			</view>
			<view :class=" num1?'card':'flippde'" @click="[reversal1(),marry(2,`num1`)]" >
				<view class="front" style="background-image: url('../../static/2.png');"></view>
				<view :class="num1?'back':'backk'"></view>
			</view>
			<view :class=" num2?'card':'flippde'" @click="[reversal2(),marry(3,`num2`)]">
				<view class="front" style="background-image: url('../../static/3.png');"></view>
				<view :class="num2?'back':'backk'"></view>
			</view>
			<view :class=" num3?'card':'flippde'" @click="[reversal3(),marry(1,`num3`)]">
				<view class="front" style="background-image: url('../../static/1.png');"></view>
				<view :class="num3?'back':'backk'"></view>
			</view>
			<view :class=" num4?'card':'flippde'" @click="[reversal4(),marry(2,`num4`)]">
				<view class="front" style="background-image: url('../../static/2.png');"></view>
				<view :class="num4?'back':'backk'"></view>
			</view>
			<view :class=" num5?'card':'flippde'" @click="[reversal5(),marry(3,`num5`)]">
				<view class="front" style="background-image: url('../../static/3.png');"></view>
				<view :class="num5?'back':'backk'"></view>
			</view>
		</view>
		<view class="buttom">
			<image src="../../static/Group 116.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 0,
				num: true,
				num1: true,
				num2: true,
				num3: true,
				num4: true,
				num5: true,
				falish:true,
				id: [],
				arr: [],
				
			}
		},
		onLoad() {

		},
		methods: {
			
			reversal: function() {
				this.num = !this.num
			},
			reversal1: function() {
				this.num1 = !this.num1
			},
			reversal2: function() {
				this.num2 = !this.num2
			},
			reversal3: function() {
				this.num3 = !this.num3
			},
			reversal4: function() {
				this.num4 = !this.num4
			},
			reversal5: function() {
				this.num5 = !this.num5
			},
			marry: function(id, num) {
				this.id.push(id)
				this.arr.push(num)
				console.log(this.arr[0])
				console.log(this.id)
				if (this.id.length == 2) {
					if (this.id[0] == this.id[1]) {
						console.log(`相等`)
						this.id = [],
						this.arr = []
					} else {
						console.log(`不相等`)
						setTimeout(() => {
						    console.log(12345) 
						
						if (this.arr[0] == `num`) {
							this.num =true
							console.log(this.num)
						} else if (this.arr[0] == `num1`) {
							this.num1 = true
						} else if (this.arr[0] == `num2`) {
							this.num2 = true
						} else if (this.arr[0] == `num3`) {
							this.num3 = true
						} else if (this.arr[0] == `num4`) {
							this.num4 = true
						} else if (this.arr[0] == `num5`) {
							this.num5 = true
						}
						if (this.arr[1] == `num`) {
							this.num = true
						} else if (this.arr[1] == `num1`) {
							this.num1 = true
						} else if (this.arr[1] == `num2`) {
							this.num2 = true
						} else if (this.arr[1] == `num3`) {
							this.num3 = true
						} else if (this.arr[1] == `num4`) {
							this.num4 = true
						} else if (this.arr[1] == `num5`) {
							this.num5 = true
						}
						this.id = []
						this.arr=[]
						}, 500)
					}
					
				}
				if(!this.num&&!this.num1&&!this.num2&&!this.num3&&!this.num4&&!this.num5){
					this.falish=false,
					console.log(this.falish,`======`)
				}
				
			}


		},
	}
</script>

<style>
	.content {
		overflow: hidden;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		/* background-image: url('../../static/Android Large - 37.png'); */
		background-image: url('../../static/18.png');
		/* background-image: url('../../static/屏幕截图 2023-03-23 165329.png'); */
	}
	.cover{
		width: 100vw;
		height: 100vh;
		background-color: #747374;
		opacity: 0.8;
		/* background-color: #f8f8f8; */
		position: absolute;
		top: 0;
		z-index: 1;
	}
	.none{
		display: none;
	}
	
.top{
	position:absolute;
	top:-114px;
	width: 100vw;
}
.over{
	margin: auto;
position: absolute;
		top: 15%;
		z-index: 10;
}
.buttom{
	position: fixed;
	bottom: -114px;
	width: 100%;
	overflow: hidden;
}
	.box {
		width: 300px;
		height: 300px;
		margin-left: 10px;
		/* margin-top: 90px; */
		display: flex;
		flex-direction: row;
		justify-content:space-around;
		align-items: center;
		flex-wrap: wrap;
	}

	.card {
		width: 29%;
		height: 30%;
		transform-style: preserve-3d;
		transition: 1s;
		/* border-radius: 8px; */
		/* border: 4px solid #f0b240; */
	}

	.front {
		width: 100%;
		height: 100%;
		background-color: blue;
		position: absolute;
		transform: rotateY(180deg);
		transform-style: preserve-3d;
		transition: 1s;
		/* border-radius: 2px; */

	}

	.back {
		width: 100%;
		height: 100%;
		background-color: yellow;
		background-image: url('../../static/屏幕截图 2023-03-23 165329.png');
	}

	.backk {
		/* transition: 5s; */
		width: 100%;
		height: 100%;
		/* background-color: yellow; */
		background: url('../../static/屏幕截图 2023-03-23 165329.png');
		position: absolute;
	}

	.flippde {
		width: 29%;
		height: 30%;
		transform: rotateY(180deg);
		transform-style: preserve-3d;
		transition: 1s;
	}
</style>
